<template>
  <!-- 安全隐患（级联） -->
  <a-cascader
    v-on="$listeners"
    v-bind="$attrs"
    :options="options"
    :load-data="loadData"
    placeholder="请选择"
    v-model="currentValue"
    :fieldNames="fieldNames"
  >
    <a-icon v-if="fetching" style="color:#096dd9;" slot="suffixIcon" type="loading" />
  </a-cascader>
</template>
<script>
import { risksList, subItem } from '@/api/quality/safe' // api

export default {
  name: 'SelectDanger',
  props: {
    // v-model绑定的数据
    value: {
      type: [Array, String, Object, Number],
      default: () => [],
    },
    // placeholder
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      },
    },
    // 自定义 options 中 label name children 的字段
    fieldNames: {
      type: Object,
      default: function () {
        return { label: 'name', value: 'id', children: 'children' }
      },
    },
    // 是否获取全部列表（包括停用项）
    isAll: {
      type: Boolean,
      default() {
        return true
      },
    },
  },
  data() {
    return {
      fetching: false,
      options: [],
      dataList:[]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getList()
    })
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value || []
      },
      set: function (value) {
        this.$emit('input', value)
      },
    },
  },
  methods: {
    getList(params) {
      setTimeout(() => {
        this.fetching = true
        subItem
          .getList(params)
          .then((res) => {
            this.fetching = false
            if (res.code === 200) {
              this.generateList(res.data?.[0]?.['children'] || [])
              this.options = res.data?.[0]?.['children'] || []
              return true
            }
          })
          .then((res) => {
            if (res && this.currentValue.length > 0) {
              let id = this.currentValue[this.currentValue.length - 2]
              let option = this.dataList.find((item) => item.id === id)
              this.getDetail(option)
            }
          })
          .catch((res) => {
            this.fetching = false
          })
      })
    },
    // 把多级菜单生成单级全部列表
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        node.isLeaf = false
        node.disabled = !node.enabled
        if (node.disabled) {
          node[this.fieldNames.label] += '（停用）'
        }
        if (!this.dataList.some((item) => item.id === node.id)) {
          this.dataList.push(node)
        }
        if (node.children?.['length'] > 0) {
          this.generateList(node.children)
        } else {
          delete node.children
        }
      }
    },
    getDetail(targetOption) {
      targetOption.loading = true
      risksList
        .getList({
          pageNo: 1,
          pageSize: 1000,
          subItemId: targetOption.id,
        })
        .then((res) => {
          targetOption.loading = false
          if (res.code === 200 && res.data?.['length'] > 0) {
            targetOption.children = res.data.map((item) => {
              item[this.fieldNames.label] = item.securityRisksName
              item.disabled = item.status == 0
              if (item.disabled) {
                item[this.fieldNames.label] += '（停用）'
              }
              return item
            })
            console.log(targetOption.children)
          }
          this.options = [...this.options]
        })
        .catch((res) => {
          targetOption.loading = false
        })
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      this.getDetail(targetOption)
    },
  },
}
</script>
